<template>
	<div class="archive">
		<div class="count">{{this.$route.params.name || $t('header.archive')}}：{{num}}{{$t('archive.article')}}</div>
		<el-timeline>
			<el-timeline-item v-for="(activity, index) in activities" :key="index" :color="activity.color" :timestamp="activity.dateTime" placement="top" @mouseenter="hoverLine(activity)">
				<div class="line-item">
					<router-link :to="{path:'/article' , query:{aid:activity.id}} " tag="span">{{activity.title}}</router-link>
				</div>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>

<script>
	export default {
		name: 'archive',
		data() {
			return {
				activities: [],
				num:0,
			};
		},
		created(){
         this.show();
		},
		methods: {
			hoverLine(activity) {
				activity.color = "#409eff"
			},
         show() {
		const _this = this;
      this.$axios
        .get("http://121.43.152.1:8081/queryAllArticle")
        .then(function (res) {
             _this.num=res.data.num;
			const { code, data} = res.data;
			code === 0 && (_this.activities = data);
        });
        }, 
		}
	}
</script>

<style scoped>
    /* <div style="width: 960px; height: 720px;"><img style="width: 100%; height: 100%;"></img></div> */
	.line-item {
		display: inline-block;
	}
	
	.line-item:hover {
		cursor: pointer;
		color: #409EFF;
	}
	
	.count {
		margin-bottom: 20px;
		font-size: 20px;
		color: #E6A23C;
	}
</style>